*{ -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */ }
html {



}
body {
    font-family:"mr", "pingfang", "Microsoft YaHei","微软雅黑";
    box-sizing: border-box;
    /*overflow: hidden;*/

}
@font-face {
    font-family: 'mr';
    src: url('../../fonts/mavenpro-regular.ttf');
}
.wrap {
    /*overflow-y: scroll;*/
    padding:20px 50px;
}

.page-content {
    width:90%;
    margin: 0 auto;
}

.tab-nav {
    width:640px;
    overflow:hidden;
    position: relative;
    margin:0 auto;
    background-color: #F8F9FA;
    font-size: 14px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;

    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;


}
.tab-nav .select {
    color:white;
}
.tab-nav span {
    font-size: 18px;
    color: #4B4F57;

    width:213px;
    display: inline-block;
    float:left;
    height:45px;
    line-height: 45px;
    text-align: center;
    cursor:pointer;
    z-index:2;
    position: relative;
}

.nav-cursor {
    position: absolute;
    border-radius: 23px;
    top:0;left:0;
    width:213px;
    height:45px;
    box-sizing: border-box;
    background-color: #32CDFF ;
    z-index:1;
}

.section {
    padding:30px 0;
    position: relative;
    display: none;
}

.section:nth-child(1) {
    display: block;!important;
}

.section .content {
    margin:16px 0;
    font-size: 16px;
    color:#676C75;
}

.section .content .title {
    font-size: 18px;
    color: #4B4F57;
}

.preview {

    width: 640px;
    margin:  0 auto;
}
.preview .age {

}
.preview .age .title {
    display: inline-block;
    vertical-align: middle;
}
.preview .age .num {
    color:#32CDFF;
    font-size: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-left:10px;
}


.preview .material {
    /*border:1px solid red;*/
}
.preview .material .title {
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
}
/*.preview .material .material-list {*/
    /*color:#8A8F9B;*/
    /*font-size: 14px;*/
    /*display: inline-block;*/
    /*vertical-align: top;*/
    /*margin-left:14px;*/
    /*width: calc( 100% - 124px);*/
    /*overflow: hidden;*/
/*}*/

/*.preview .material .material-list  .item{*/
    /*width:50%;*/
    /*float:left;*/
    /*margin-bottom: 15px;*/
/*}*/


.preview .material .material-list {
    list-style: none;
    padding: 0 !important;
    overflow: hidden;
    margin-top: 5px;
    width: calc( 100% - 134px);

    display: inline-block;
    vertical-align: top;

    font-size: 16px;
    color: #676C75;
}

.preview .material .material-list  li {
    position: relative;
    line-height: 30px;
    margin: 0 0  15px 20px;!important;
    width: calc(50% - 25px);
    float:left;
    padding:0!important;
}

.preview .material .material-list  li:nth-child(1) {

    width: calc(100% - 25px);
}

.preview .material .material-list   li span {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 3px;
    background-color: #8A8F9B;
    border-radius: 50%;
    position: absolute;
    top:12px;
    left:-8px;
}


.preview .brief {
    margin-bottom:15px;
}

.preview .brief p{
    font-size: 16px;
    color: #676C75;
    line-height:28px;
}


.intro-img {
    width:100%;
    margin-bottom: 15px;
}


.objects {
    width: 640px;
    margin:  0 auto;
}
.object-item {
    margin: 15px 0 40px 0;
}

.object-item .title {
    font-size: 18px;
    color: #4B4F57;
}
.object-item .content p{
    font-size: 14px;
    color:#8A8F9B;
}

.object-item .content span{
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 50px;
    color:#676C75;
}

.scenario-list {
    list-style: none;
    font-size: 16px!important;
    color: #676C75;
    padding: 5px 10px !important;
}

.scenario-list li {
    position: relative;
    line-height: 30px;
    margin-bottom:15px!important;


}
.scenario-list  li:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 3px;
    background-color: #8A8F9B;
    border-radius: 50%;
    position: absolute;
    top:12px;
    left:-8px;
}


.unit-list {
    width: calc( 100% - 40px);
    font-size: 0;
    margin: 20px 0;
    position: relative;
    height:40px;
    border-bottom:2px solid #F2F3F4;
    padding: 0 20px;
    padding-bottom: 5px;
}

.u-nav-cursor {
    position: absolute;
    top:42px;
    left: 20px ;
    width:calc((100% - 40px)/6);
    height:3px;
    box-sizing: border-box;
    background-color: #32CDFF ;
    z-index:1;
    border-radius: 10px;
}


.unit-list span {
    display: inline-block;
    height:40px;
    line-height: 40px;
    color:#4B4F57;
    width:16.6666%;
    font-size: 18px;
    text-align: center;
    position: relative;
    z-index: 2;

    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;

    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;

    cursor:pointer;
}

.unit {
    display: none;
}
.active-unit {
    display: block!important;
}

.object {
    margin:20px 0;
}
.object .title {
    font-size: 18px;
    color: #4B4F57;
    /*display: inline-block;*/
    /*vertical-align: top;*/
    /*width:95px;*/
    /*margin-top:2px;*/
}

.object .item {
    font-size: 16px;
    color: #676C75;
    line-height: 26px;
    /*display: inline-block;*/
    /*vertical-align: top;*/
    /*width: calc(100% - 100px);*/

}


.unit-content{
    margin:20px 0;
    font-size: 14px;
    color:#676C75;
    width:100%;
    /*min-width:800px;*/
    border-top: 1px solid rgba(50,205,255,0.19);
    border-bottom: 1px solid rgba(50,205,255,0.19);
    table-layout: fixed;
    border-collapse: collapse;

}

.unit-content tr {
    width:100%;
}

.unit-content tr:nth-child(even) {
    background: rgba(50,205,255,0.1);
}

.unit-content th {

    width:100%;
    border:1px solid rgba(50,205,255,0.10);
}

.unit-content td {
    border:1px solid rgba(50,205,255,0.10);
}

.unit-content .short {
    width:13%;
    min-width:00px!important;
    text-align: center;
    padding:16px 10px 16px 10px;
    font-size: 16px;
    color: #4B4F57;

}

.unit-content .long {
    width: 30%!important;
    padding:16px 24px 16px 24px;
    line-height: 28px;
    font-size: 16px;
    color: #676C75;
}

.unit-content .long span {
    word-break:normal;
    word-wrap:break-word;
}

.unit-content .long .item {
    word-wrap:break-word;
    display: block;
    padding:2px 0 ;
}


.age-icon {
    background-size: 20px 20px;
    background-image: url('../../icon/levelIntro/age.png');
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 5px 0 5px;
}


.material-icon {
    background-size: 24px 24px;
    background-image: url('../../icon/levelIntro/material.png');
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 5px 0 5px;
}

.menu-icon {
    background-size: 24px 24px;
    background-image: url('../../icon/levelIntro/menu.png');
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;

}

.goal-icon {
    background-size: 24px 24px;
    background-image: url('../../icon/levelIntro/goal.png');
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;

}

.flag-icon {
    background-size: 24px 24px;
    background-image: url('../../icon/levelIntro/flag.png');
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}


::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background: rgba(0,0,0,0.1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 5px;
}

::-webkit-scrollbar-button {
    display: none;
}
::-webkit-scrollbar-thumb {
    width: 8px;
    min-height: 15px;
    background: rgba(0,0,0,.1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 5px;
}
::-webkit-scrollbar-track {
    background-color: #fff;
}
::-webkit-scrollbar-track-piece {
    background: #fff;
}